<script lang="ts" setup>
// 页面配置
definePage({
  style: {
    navigationBarTitleText: '关于我们',
    backgroundColor: '#FFFFFF',
    navigationBarTextStyle: 'black',
  },
})

// 应用信息
const appInfo = {
  name: '移动审批',
  version: '1.0.0',
  description: '便捷高效的企业审批管理系统',
  copyright: '© 2024 公司名称',
}

// 联系方式
const contactInfo = [
  { label: '客服电话', value: '400-123-4567' },
  { label: '邮箱', value: 'support@example.com' },
  { label: '官网', value: 'www.example.com' },
]

// 点击联系方式
function handleContactClick(contact: typeof contactInfo[0]) {
  if (contact.label === '客服电话') {
    uni.makePhoneCall({
      phoneNumber: contact.value,
    })
  }
  else if (contact.label === '邮箱') {
    uni.setClipboardData({
      data: contact.value,
      success: () => {
        uni.showToast({
          title: '邮箱已复制',
          icon: 'success',
        })
      },
    })
  }
  else if (contact.label === '官网') {
    const url = `https://${contact.value}`
    // #ifdef APP-PLUS
    plus.runtime.openURL(url)
    // #endif
    // #ifdef H5
    window.open(url)
    // #endif
    // #ifdef MP-WEIXIN
    wx.navigateToMiniProgram({
      appId: '', // 可以留空
      path: '', // 可以留空
      envVersion: 'release',
      fail: () => {
        uni.showToast({
          title: '无法打开链接',
          icon: 'none',
        })
      },
    })
    // #endif
  }
}
</script>

<template>
  <view class="about-container min-h-screen bg-white">
    <!-- 应用Logo和名称 -->
    <view class="app-info-section flex flex-col items-center justify-center pb-8 pt-12">
      <view class="logo-container mb-4 h-32 w-32 flex items-center justify-center rounded-2xl bg-slate-50">
        <i class="i-solar:check-square-broken text-6xl text-primary" />
      </view>
      <text class="text-2xl text-slate-800 font-bold">{{ appInfo.name }}</text>
      <text class="mt-2 text-sm text-slate-500">版本号：{{ appInfo.version }}</text>
      <text class="mt-4 max-w-xs text-center text-sm text-slate-600">{{ appInfo.description }}</text>
    </view>

    <!-- 联系方式 -->
    <view class="contact-section mt-6 px-6">
      <view class="section-title mb-3 flex items-center">
        <i class="i-solar:microphone-2-broken mr-2 text-slate-500" />
        <text class="text-lg text-slate-800 font-medium">联系方式</text>
      </view>
      <view class="contact-list overflow-hidden rounded-lg bg-slate-50">
        <view
          v-for="(contact, index) in contactInfo"
          :key="index"
          class="contact-item flex items-center justify-between px-5 py-4"
          :class="{ 'border-b border-slate-200': index < contactInfo.length - 1 }"
          @click="handleContactClick(contact)"
        >
          <text class="text-slate-700">{{ contact.label }}</text>
          <view class="flex items-center">
            <text class="mr-2 text-slate-500">{{ contact.value }}</text>
            <i class="i-carbon-chevron-right text-xs text-slate-300" />
          </view>
        </view>
      </view>
    </view>

    <!-- 法律信息 -->
    <view class="legal-section mt-6 px-6">
      <view class="section-title mb-3 flex items-center">
        <i class="i-solar:scale-broken mr-2 text-slate-500" />
        <text class="text-lg text-slate-800 font-medium">法律信息</text>
      </view>
      <view class="legal-list overflow-hidden rounded-lg bg-slate-50">
        <view class="legal-item border-b border-slate-200 px-5 py-4">
          <text class="text-slate-700">用户协议</text>
        </view>
        <view class="legal-item px-5 py-4">
          <text class="text-slate-700">隐私政策</text>
        </view>
      </view>
    </view>

    <!-- 版权信息 -->
    <view class="copyright-section mb-8 mt-12 text-center">
      <text class="text-xs text-slate-400">{{ appInfo.copyright }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.about-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  box-sizing: border-box;
}

.app-info-section {
  padding-top: 48px;
}

.contact-item,
.legal-item {
  transition: all 0.2s ease;
}

.contact-item:active,
.legal-item:active {
  background-color: #f3f4f6;
}
</style>
